<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员认证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            display: flex;
            justify-content: flex-start;
        }

        .navigation {
            display: flex;
            background-color: rgb(48, 65, 86);
            height: 100vh;
            width: 12rem;
            justify-content: center;
            list-style-type: none;
        }

        .wrap {
            display: flex;
            justify-content: center;
            background-color: rgb(48, 65, 86);
            width: 10rem;
            height: 1rem;
            color: inherit;
            color: white;
            text-decoration: none;
            padding-right: 1rem;
            margin: 3rem;
        }

        .selected {
            color: #7B8CFE;
        }

        .background {
            display: flex;
            height: 100vh;
            width: 100%;
            background-color: #eceff7;
            justify-content: center;
            align-items: center;
        }

        .container {
            display: flex;
            width: 22.375rem;
            height: 31.25rem;
            border-radius: 0.9375rem;
            padding: 0 50px;
            background-color: #ffffff;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .btn {
            padding: 10px;
            text-align: center;
            margin-top: 40px;
            background-color: #7B8CFE;
            border: .0625rem solid #7B8CFE;
            color: #fff;
            border-radius: .625rem;
        }

        .btn:hover {
            background-color: #ffffff;
            border: .0625rem solid #7B8CFE;
            color: #000000;
        }

        .msg {
            visibility: hidden;
            text-align: center;
            line-height: 5.5rem;

        }

        .login {
            visibility: hidden;
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>

<body>
    <ul class="navigation" id="nav">
        <div class="menu-wrapper">
            <a href="./index.html" class="wrap">
                <li>
                    <span>首页</span>
                </li>
            </a>
            <a href="./mine.html" class="wrap">
                <li>
                    <span>我的</span>
                </li>
            </a>
            <a href="./identify.html" class="wrap selected" v-if="position">
                <li>
                    <span>管理员认证</span>
                </li>
            </a>
            <a href="./administrator.html" class="wrap" id="administrator" v-if="antiPosition">
                <li>
                    <span>管理账号</span>
                </li>
            </a>
        </div>
    </ul>
    <div class="background" id="root">
        <div class="container">
            <span class="header">管理员认证</span>
            <div class="form-wrapper">
                <input type="text" name="password" placeholder="认证码" class="input-item" id="code">
                <div class="btn" @click="authenticat">认证</div>
            </div>
            <div class="msg">
                无账号？
                <a class="login">注册</a>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="../node_modules/axios/dist/axios.js"></script>
<script>
    Vue.config.productionTip = false; //阻止生成生产提示

    // 实例化vue
    const x = new Vue({
        el: '#root',
        methods: {
            //认证
            authenticat() {
                axios({
                    method: 'POST',
                    url: 'http://localhost:9999/identify/selectByCode',
                    data: {
                        code: document.getElementById("code").value
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    console.log(response.data)
                    //0，认证失败
                    //-1，认证码无效
                    //认证码已被使用
                    //1，认证成功
                    if (response.data.code == 0) {
                        alert("认证失败！")
                    } else if (response.data.code == -1 || response.data.data.codeInfo[0] == undefined) {
                        alert("认证码无效！")
                    } else if (response.data.data.codeInfo.beUsed == "1") {
                        alert("认证码已被使用！")
                    } else {
                        //修改用户信息
                        axios({
                            method: 'POST',
                            url: 'http://localhost:9999/user/updatePosition',
                            data: {
                                userId: localStorage.getItem("userId")
                            },
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(response => {
                            console.log(response.data)
                        }).catch(error => {
                            console.error('Error', error.message);
                        })

                        //提示认证成功
                        if (confirm("认证成功！正在回到登录页面~")) {
                            window.location.reload();
                            //重新登录
                            location.replace("./login.html")
                        }
                    }
                }).catch(error => {
                    console.error('Error', error.message);
                });
            }
        }
    })

    //导航栏对应的vue
    const nav = new Vue({
        el: '#nav',
        data: {
            position: localStorage.getItem("position"),
        },
        computed: {
            antiPosition() {
                return !this.position
            }
        }
    })
</script>

</html>